<template>
  <div class="qin">
    客服
    <!-- on-preview 点击文件列表中已上传的文件时的钩子 -->
    <!-- on-remove 文件列表移除文件时的钩子 -->
    <!-- file-list -->
    <!-- action="/api-upload/upload/coursefile" -->
    <el-upload
      class="upload-demo"
      action
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <div class="service" @click="serviceadd">
      <img src="@/assets/images/客服 .png" alt="" />
      <p>在线客服</p>
    </div>
    <el-dialog
      title="在线客服"
      class="dialog"
      @close="close"
      :visible.sync="dialogVisible"
      width="13%"
      :modal="false"
    >
      <div class="center"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'customersevice',
  data() {
    return {
      // headers: {
      //   'content-type': 'multipart/form-data'
      // },
      // 客服按钮开关
      dialogVisible: false,
      // socket对象
      socket: '',
      fileList: []
    }
  },
  created() {},
  methods: {
    serviceadd() {
      this.dialogVisible = true
    },
    close() {
      console.log('弹框关闭了')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleAvatarSuccess(res, file) {
      console.log('1', res)
      console.log('2', file)
    },
    // 上传成功失败都会执行
    async changeFile(file) {
      if (!file) return
      console.log('状态参数', file)
      
    }
  }
}
</script>

<style lang="scss" scoped>
.qin {
  width: 100%;
  height: 828px;
  //   background-color: skyblue;
  .demo-form-inline {
    margin-top: 5px;
    margin-left: -40px;
    @media screen and (min-height: 1070px) {
      margin: 15px 0 15px -40px;
    }
  }
  .table {
    width: 100%;
    height: 595px;
    @media screen and (min-height: 1070px) {
      height: 685px;
    }
  }
  .pagination {
    // background-color: skyblue;
    position: fixed;
    bottom: 50px;
    right: 120px;
    // 适配浏览器全屏模式下的上下边距
    @media screen and (min-height: 1070px) {
      bottom: 65px;
    }
  }
  .service {
    // display: flex;
    width: 45px;
    border: 1px solid black;
    border-radius: 5px;
    // text-align: center;
    padding: 10px 0 20px 0;
    position: fixed;
    right: 10px;
    bottom: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    &:hover {
      background-color: #ccc;
    }
    img {
      display: block;
      width: 35px;
      height: 35px;
    }
    p {
      writing-mode: tb-rl;
      vertical-align: middle;
    }
  }

  ::v-deep .dialog {
    position: fixed;
    right: -1350px !important;
    top: -1px !important;
    .center {
      width: 100%;
      height: 500px;
      background-color: skyblue;
    }
  }
}
</style>